<!DOCTYPE html>
<html lang="en">
<head title="">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./index.css">
  <style>
  </style>
  <script src="./vue.js"></script>
     <script src="./index.js"></script>
</head>
<body>
  <div id="app" :loading="loading">
    <!-- 表单 -->
    <el-form :model="formData" ref="form" :disabled="disabled" :rules="rules" ref="form" label-width="100px" class="demo-formData">
      <el-form-item label="活动名称" prop="name" v-show="getAuth('name','show')" :rules="getAuth('name','required')">
        <el-input v-model="formData.name" :disabled="getAuth('name','edit')"></el-input>
      </el-form-item>
        <el-form-item label="活动区域" prop="region" v-show="getAuth('region','show')" :rules="getAuth('region','required')">
          <el-select v-model="formData.region" :disabled="getAuth('region','edit')" placeholder="请选择" style="width: 100%;" clearable>
            <el-option
            v-for="(dict,index) in regionList"
            :key="index"
            :label="dict.label"
            :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" prop="date" v-show="getAuth('date','show')" :rules="getAuth('date','required')">
          <el-date-picker  placeholder="选择日期时间" v-model="formData.date" style="width: 100%;" :disabled="getAuth('date','edit')"></el-date-picker>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery" v-show="getAuth('delivery','show')" :rules="getAuth('delivery','required')">
          <el-switch  v-model="formData.delivery" :disabled="getAuth('delivery','edit')"></el-switch>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource"  v-show="getAuth('resource','show')" :rules="getAuth('resource','required')">
          <el-radio-group  v-model="formData.resource" >
            <el-radio
              v-for="dict in resourceList"
              :key="dict.value"
              :label="dict.value"
              :disabled="getAuth('resource','edit')"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc" v-show="getAuth('desc','show')" :rules="getAuth('desc','required')">
          <el-input v-model="formData.desc" type="textarea" :disabled="getAuth('desc','edit')"></el-input>
        </el-form-item>
      </el-form>
  </div>
</body>

  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          loading:true,
          // 定义表单数据
          formData: {
            name:'',
            region:'',
            date:'',
            delivery:true,
            resource:'',
            desc:'',
          },
          regionList:[ {label:'区域一',value:'1'},{label:'区域二',value:'2'}],
          resourceList:[ {label:'线上',value:'1'},{label:'线下',value:'2'}],
          // 定义权限数据
          authData:{},
          // 表单是否校验
          disabled:false,
          // 校验规则
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'change' },
            ],
            region: [
              { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            delivery:[
              {required: true, message: '请选择是否即时配送', trigger: 'change' }
            ],
            resource: [
              { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
            desc: [
              { required: true, message: '请填写活动形式', trigger: 'change' }
            ],
          },
         }
      },
      // 监听事件
      mounted(){
        window.addEventListener('message', this.handleMessage)
      },
      methods: {
        handleMessage(event) {
          if(event.data.cmd == 'initialization'){
            this.getData(event)
          }else{
            this.handleSubmit(event)
          }
        },
        getData(event){
          // 获取数据权限
          this.authData = event.data.data.authData?event.data.data.authData:{}
          // 获取表单数据
          this.formData = event.data.data.formData?event.data.data.formData:this.formData
          // 全表单是否禁用
          this.disabled = event.data.data.customerDisabled?event.data.data.customerDisabled:false
          this.loading = false
        },
        // 通过数据权限处理表单
        getAuth(prop,auth){
          if(JSON.stringify(this.authData) !== '{}'){
            if(auth === 'show'){
              return this.authData[prop]?(this.authData[prop][auth]!==false?true:false):true
            }else if(auth === 'required'){
              return this.authData[prop]?(this.authData[prop][auth]!==false?this.rules.prop:[]):[]
            }else{
              return this.authData[prop]?(this.authData[prop][auth]!==false?false:true):false
            }
          }
          // 当数据权限为空时，会赋予表单默认权限
          else{
            if(auth === 'show'){
              return true
            }else if(auth === 'required'){
              return []
            }else{
              return false
            }
          }
        },
        handleSubmit(event){
          this.$refs['form'].validate((valid) => {
            // 校验通过，发送表单数据
            if (valid && event.data.data.isSubmit === 1) {
                window.parent.postMessage({
                  message: 'success',
                  data:this.formData
                }, '*');
            }else{
              // 处理表单校验失败的情况
              window.parent.postMessage({
                  message: 'error',
                  data:{}
                }, '*');
            }
          })
        }
      },
    })
  </script>
</html>
